<template>
  <el-tag
    :type="getTagType(type)"
    :color="getTagColor(type)"
    :effect="effect"
    :size="size"
    :closable="closable"
    @close="$emit('close')"
  >
    <el-icon v-if="showIcon" class="mr-1">
      <component :is="getTypeIcon(type)" />
    </el-icon>
    {{ getTypeLabel(type) }}
  </el-tag>
</template>

<script setup lang="ts">
import { 
  Monitor, 
  Cpu, 
  Connection, 
  Document, 
  Setting,
  DataAnalysis,
  QuestionFilled,
  User
} from '@element-plus/icons-vue'
import { DefectType } from '@/types/defect'

interface Props {
  type: DefectType
  effect?: 'dark' | 'light' | 'plain'
  size?: 'large' | 'default' | 'small'
  closable?: boolean
  showIcon?: boolean
}

withDefaults(defineProps<Props>(), {
  effect: 'light',
  size: 'default',
  closable: false,
  showIcon: true
})

defineEmits<{
  close: []
}>()

// 缺陷类型标签类型映射
const getTagType = (type: DefectType) => {
  const typeMap: Record<DefectType, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
    [DefectType.FUNCTIONAL]: 'danger',
    [DefectType.UI]: 'warning',
    [DefectType.PERFORMANCE]: 'primary',
    [DefectType.COMPATIBILITY]: 'info',
    [DefectType.SECURITY]: 'danger',
    [DefectType.USABILITY]: 'warning',
    [DefectType.DATA]: 'warning',
    [DefectType.INTEGRATION]: 'primary',
    [DefectType.CONFIGURATION]: 'info',
    [DefectType.DOCUMENTATION]: 'info'
  }
  return typeMap[type] || 'info'
}

// 缺陷类型标签颜色映射
const getTagColor = (type: DefectType) => {
  const colorMap: Record<DefectType, string> = {
    [DefectType.FUNCTIONAL]: '#f56565',
    [DefectType.UI]: '#ed8936',
    [DefectType.PERFORMANCE]: '#3182ce',
    [DefectType.COMPATIBILITY]: '#38b2ac',
    [DefectType.SECURITY]: '#e53e3e',
    [DefectType.USABILITY]: '#d69e2e',
    [DefectType.DATA]: '#d69e2e',
    [DefectType.INTEGRATION]: '#805ad5',
    [DefectType.CONFIGURATION]: '#68d391',
    [DefectType.DOCUMENTATION]: '#68d391'
  }
  return colorMap[type] || '#a0aec0'
}

// 缺陷类型标签文本映射
const getTypeLabel = (type: DefectType) => {
  const labelMap: Record<DefectType, string> = {
    [DefectType.FUNCTIONAL]: '功能缺陷',
    [DefectType.UI]: '界面缺陷',
    [DefectType.PERFORMANCE]: '性能缺陷',
    [DefectType.COMPATIBILITY]: '兼容性缺陷',
    [DefectType.SECURITY]: '安全缺陷',
    [DefectType.USABILITY]: '易用性缺陷',
    [DefectType.DATA]: '数据缺陷',
    [DefectType.INTEGRATION]: '集成缺陷',
    [DefectType.CONFIGURATION]: '配置缺陷',
    [DefectType.DOCUMENTATION]: '文档缺陷'
  }
  return labelMap[type] || '未知类型'
}

// 缺陷类型图标映射
const getTypeIcon = (type: DefectType) => {
  const iconMap: Record<DefectType, any> = {
    [DefectType.FUNCTIONAL]: Setting,
    [DefectType.UI]: Monitor,
    [DefectType.PERFORMANCE]: Cpu,
    [DefectType.COMPATIBILITY]: Connection,
    [DefectType.SECURITY]: Setting,
    [DefectType.USABILITY]: User,
    [DefectType.DATA]: DataAnalysis,
    [DefectType.INTEGRATION]: Connection,
    [DefectType.CONFIGURATION]: Setting,
    [DefectType.DOCUMENTATION]: Document
  }
  return iconMap[type] || QuestionFilled
}
</script>

<style scoped>
.mr-1 {
  margin-right: 4px;
}
</style>